import React from "react";
import SearchBar from "./components/SearchBar";
import CollapsibleItem from "./components/CollapsibleItem";
import { useSearch } from "./hooks/useSearch";
import { useCollapsibleItems } from "./hooks/useCollapsibleItems";
import { CollapsibleItem as CollapsibleItemType } from "./types";
import "./App.css";

// 示例数据 - 扁平化结构
const sampleData: CollapsibleItemType[] = [
  {
    id: "1",
    title: "React 基础概念",
    content: "React 是一个用于构建用户界面的 JavaScript 库。它使用组件化的方式构建应用，每个组件都有自己的状态和生命周期。",
    isExpanded: false
  },
  {
    id: "2",
    title: "组件和 Props",
    content: "组件是 React 应用的基本构建块。Props 是从父组件传递给子组件的数据。",
    isExpanded: false
  },
  {
    id: "3",
    title: "State 和生命周期",
    content: "State 是组件的内部状态，当 state 改变时，组件会重新渲染。生命周期方法允许我们在组件的不同阶段执行代码。",
    isExpanded: false
  },
  {
    id: "4",
    title: "TypeScript 类型系统",
    content: "TypeScript 是 JavaScript 的超集，添加了静态类型检查。它可以帮助我们在开发过程中发现错误，提高代码质量。",
    isExpanded: false
  },
  {
    id: "5",
    title: "基础类型",
    content: "TypeScript 支持多种基础类型，包括 string、number、boolean、array 等。",
    isExpanded: false
  },
  {
    id: "6",
    title: "接口和类型别名",
    content: "接口定义了对象的结构，类型别名可以为类型创建新名称。",
    isExpanded: false
  },
  {
    id: "7",
    title: "前端开发最佳实践",
    content: "前端开发需要遵循一些最佳实践，包括代码组织、性能优化、可访问性等方面。",
    isExpanded: false
  },
  {
    id: "8",
    title: "代码组织",
    content: "良好的代码组织包括合理的文件结构、模块化设计、清晰的命名规范等。",
    isExpanded: false
  },
  {
    id: "9",
    title: "性能优化",
    content: "性能优化包括代码分割、懒加载、缓存策略、图片优化等技术。",
    isExpanded: false
  },
  {
    id: "10",
    title: "响应式设计",
    content: "响应式设计确保网站在不同设备和屏幕尺寸上都能良好显示，提供一致的用户体验。",
    isExpanded: false
  }
];

const App: React.FC = () => {
  const { items, toggleItem, expandItem, expandAll, collapseAll } = useCollapsibleItems(sampleData);
  const {
    searchQuery,
    searchResults,
    highlightedItemId,
    currentResultIndex,
    performSearch,
    clearSearch,
    navigateToPrevious,
    navigateToNext,
    isItemHighlighted
  } = useSearch(items);

  // 处理搜索结果导航
  React.useEffect(() => {
    if (searchResults.length > 0 && highlightedItemId) {
      expandItem(highlightedItemId);
      // 滚动到目标元素
      setTimeout(() => {
        const element = document.getElementById(`item-${highlightedItemId}`);
        if (element) {
          element.scrollIntoView({ behavior: 'smooth', block: 'center' });
        }
      }, 100);
    }
  }, [highlightedItemId, searchResults.length, expandItem]);

  // 处理项目点击
  const handleItemClick = (itemId: string) => {
    expandItem(itemId);
  };

  return (
    <div className="app">
      <header className="app-header">
        <h1>可收起内容搜索演示</h1>
        <div className="controls">
          <button onClick={expandAll} className="control-button">
            展开所有
          </button>
          <button onClick={collapseAll} className="control-button">
            收起所有
          </button>
        </div>
      </header>

      <main className="app-main">
        <SearchBar
          onSearch={performSearch}
          onClear={clearSearch}
          results={searchResults}
          isSearching={!!searchQuery}
          currentIndex={currentResultIndex}
          onPrevious={navigateToPrevious}
          onNext={navigateToNext}
        />

        <div className="content-container">
          {items.map((item) => (
            <div key={item.id} id={`item-${item.id}`}>
              <CollapsibleItem
                item={item}
                onToggle={toggleItem}
                searchQuery={searchQuery}
                isHighlighted={isItemHighlighted(item.id)}
                onItemClick={handleItemClick}
              />
            </div>
          ))}
        </div>

      </main>
    </div>
  );
};

export default App;
